<template>
    <div>
        <el-button type="primary" :loading="loading" @click="exportData">导出数据</el-button>
        <el-button @click="test">转换</el-button>
        <!-- 花费的时间是:{{ timeDiff }} -->
        <!-- <button @click="fn(10000)" v-throttle>点击</button> -->
        <!-- <ul>
            <li v-for="item in dataList" :key="item?.goods_id">
                <h4>{{ item.goods_name }}</h4>
                <img style="width:200px" v-lazy="item.goods_big_logo"/>
            </li>
        </ul> -->
        <el-table v-loading="loading" element-loading-text="下载中...." :data="dataList">
            <template v-for="(item, index) in excelOpt.sheetInfos[0].fields" :key="index">
                <el-table-column :prop="item" :label="excelOpt.sheetInfos[0].headers[0][index]"></el-table-column>
            </template>
        </el-table>
    </div>
</template>
<script setup>
import { ElButton, ElMessage } from 'element-plus';
import { onMounted, onUnmounted, reactive, ref, toRefs } from 'vue';
import { downloadExcel, convertImgToBase64 } from "@/utils/ExcelHelper";

import MainThreadWorker from "@/worker/MainThreadWorker.js";

let dataList = ref([]);

let getList = async () => {
    let res = await fetch("https://api-hmugo-web.itheima.net/api/public/v1/goods/search?pagesize=40");
    let data = await res.json();
    console.log(data);

    dataList.value = data.message.goods.filter(item => item.goods_big_logo.length > 0);
    console.log(dataList)
}

const test = async () => {
    const main_thread = new MainThreadWorker({})
    console.log(main_thread, "xxxx");
    main_thread.postMessage({
        actionType: "exportExcel",
        payload: "count:100000"
    }).then(res => {
        console.log("worker线程传送过来的数据", res);
    })

    main_thread.postMessage({
        actionType: "testWorker",
        payload: 100
    }).then(res => {
        console.log("worker线程传送过来的数据", res);
    })
}

onMounted(() => {
    getList();
})

onUnmounted(() => {
    //组件卸载时，主线程的work任务主动销毁停止
    worker.value.terminate();
})

const loading = ref(false);
const excelOpt = reactive({
    // fileName:"商品列表",
    sheetInfos: [
        {
            headers: [["ID", "商品名字", "商品图片", "商品价格", "商品数量", "商品重量","图片资源"]],
            fields: ["goods_id", "goods_name", "goods_big_logo", "goods_price", "goods_number", "goods_weight","buffer"],
            columnsWidth: [10, 30, 20, 10, 10, 10,30],
            sheetName: '热门',
            data: [],
            merges: [],
            attrs: []
        }
    ]
})

const worker = ref(null);

const exportData = async () => {

    //实例化worker对象
    worker.value = new MainThreadWorker();
    loading.value = true;
    const base64 = await convertImgToBase64("https://img1.baidu.com/it/u=2062152131,1998701002&fm=253&fmt=auto&app=138&f=JPEG");
    // return false;
    //监听操作信息
    worker.value.postMessage({
        actionType: "exportsExcel",
        payload: { data: JSON.stringify(dataList.value), base64,excelOpt:JSON.stringify(excelOpt) }
    }).then(res => {
        console.log(res, "子线程返回的数据信息");

        //直接生成excel文件，通过worker线程处理业务数据
        downloadExcel(res)

        ElMessage({
            message: "导出成功",
            type: "success"
        })
    });

    loading.value = false;
}
</script>